<template>
  <el-card class="fac-container">
    <el-row class="fac-row">
      <el-col :span="24">
        <span class="fac-name" @click="handleEdit(sensor)">{{
          sensor.type
        }}</span>
        <el-tag class="ml-2" type="success" effect="dark">{{
          sensor.status === 1 ? '在线' : '离线'
        }}</el-tag>
      </el-col>
    </el-row>

    <el-row class="fac-row">
      <el-col :span="24">
        <el-descriptions class="info-desc" :column="1" direction="vertical">
          <el-descriptions-item label="设备编号：">{{
            sensor.id
          }}</el-descriptions-item>
          <el-descriptions-item label="mac：">{{
            sensor.mac
          }}</el-descriptions-item>
        </el-descriptions>

        <el-image
          class="avatar-uploader"
          :src="props.sensor.picPath"
          :preview-src-list="srcList"
          :initial-index="0"
          fit="cover"
        />
      </el-col>
    </el-row>

    <el-row class="fac-row">
      <el-col :span="24">
        <el-descriptions
          class="detail-info"
          :column="2"
          border
          direction="vertical"
        >
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">上报间隔</div>
            </template>
            {{ sensor.reportInterval }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">上行LQI</div>
            </template>
            {{ sensor.upLqi }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">下行LQI</div>
            </template>
            {{ sensor.downLqi }}
          </el-descriptions-item>
          <el-descriptions-item
            ><template #label>
              <div class="cell-item">createTime</div>
            </template>
            {{ sensor.nodeCreateTime }}
          </el-descriptions-item>
          <el-descriptions-item
            ><template #label>
              <div class="cell-item">LongitudeAndLatitude</div>
            </template>
            {{ sensor.address }}
          </el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup>
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'
import { ref, defineProps, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const srcList = ref([props.sensor.picPath])

const router = useRouter()

const props = defineProps(['sensor'])

const sensorValue = computed(() => {
  if (props.sensor.value === '1.0') {
    return '有'
  } else if (props.sensor.value === '0.0') {
    return '无'
  } else if (props.sensor.type === '环境噪声') {
    return props.sensor.value + 'db'
  } else if (props.sensor.type === '激光测距') {
    return props.sensor.value + '米'
  } else if (props.sensor.type === '横波') {
    return props.sensor.value + 'g'
  } else {
    return props.sensor.value + 'g'
  }
})

const facilityPath = ref('')
const imageUrl = ref('')

/* mounted(() => {
  // facilityPath.value = props.picPath
}) */

const handleEdit = (sensor) => {
  router.push({
    path: '/sensor/node/edit',
    query: { id: sensor.id, mac: sensor.mac }
  })
}
</script>

<style lang="scss" scoped>
.fac-container {
  flex: 1;
  // width: 350px;
  min-width: 330px;
  border-radius: 30px;
  &:nth-child(3n-1) {
    margin: 10px;
  }
  .fac-row {
    .fac-id:hover {
      cursor: pointer;
      color: #409eff;
    }
    padding: 10px 0px;
    .detail-info {
      flex: 1;
    }
    .avatar-uploader {
      width: 100px;
      height: 100px;
      display: block;
    }
    & :deep(.el-col-24) {
      display: flex;
      justify-content: space-between;
    }
    .info-desc {
      // width: 160px;
      box-sizing: border-box;
      display: inline;
    }
    .cell-item {
      font-size: 10px;
    }
    & :deep(.el-upload--picture-card i) {
      margin-top: auto;
    }
    .fac-img {
      width: 100px;
      box-sizing: border-box;
    }
  }
  .fac-name {
    font-size: 20px;
    font-weight: 600;
  }
  & .fac-name:hover {
    cursor: pointer;
    color: #409eff;
  }
  .ml-2 {
    margin-left: 5px;
  }
}
</style>
